<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>冉振东</title>
		<style type="text/css">
			.main {
				width: 1200px;
				height: 675px;
				background-image: url(img/background.jpg);
			}
			
			.haima {
				position: absolute;
				width: 80px;
				height: 80px;
				background-image: url(img/hai.png);
				font-size: 30px;
				font-family: "黑体";
				color: lime;
				text-align: center;
				line-height: 71px;
				}
			
			.chr {
				position: absolute;
				width: 80px;
				height: 80px;
				background-image: url(img/chrismas_dddd.png);
				font-size: 30px;
				font-family: "黑体";
				color: fuchsia;
				text-align: center;
				line-height: 71px;
				}
			
			.tree {
				position: absolute;
				width: 100px;
				height: 100px;
				background-image: url(img/tree_sls.png);
				}
																
			.top {
				height: 500px;
				border: 0px solid #FF0000;
				overflow: hidden;
				position: relative;
			}
			
			.text {
				font-size: 30px;
				font-weight: bold;
				color: lawngreen;
			}
			
			.kaishi {
				width: 50px;
				height: 50px;
				position: absolute;
				left: 800px;
				top: 54px;
				border-radius: 50%;
				cursor: pointer;
			}
			
			.zanting {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 910px;
				top: 42px;
				border-radius: 50%;
				cursor: pointer;
			}
			
			.tuichu {
				width: 50px;
				height: 20px;
				position: absolute;
				left: 1115px;
				top: 60px;
				cursor: pointer;
			}
			
			.jieshu {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 1015px;
				top: 55px;
				border-radius: 50%;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="top">
				

			</div>
			<div class="bottom">
				<table style="position: relative;" border="0" width="100%" height="135">
					<tr>
						<td>
							<div class="kaishi" onclick="kaishi()"></div>
							<div class="zanting" onclick="zanting()"></div>
							<div class="tuichu" onclick="tuichu()"></div>
							<div class="jieshu" onclick="jieshu()"></div>
						</td>
						<td width="700">
							<div class="text" id="zql">正确率: 100%</div>
							<div class="text" id="time">时间: 00:00:00</div>
							<div class="text" id="geshu">速度: 1个/分钟</div>
						</td>
						<td width="100">
							<img src="img/shark1_kaishi.png" />
						</td>
						<td width="100">
							<img src="img/shark3_zanting.png" />
						</td>
						<td width="100">
							<img src="img/shark2_tingzhi.png" />
						</td>
						<td width="100">
							<img src="img/shark4_tuichu.png" />
						</td>
					</tr>
				</table>
			</div>
		</div>
		<script type="text/javascript">
			var nz2 = 0;
			var nz1 = 0; //苹果移动定时器ID
			var createHM = 0; //创建苹果的定时器ID
			var createCHR = 0; //圣诞老人
			var createtree = 0;
			var timeid = 0; //时间定时器的ID
			var time = 0; //统计用时
			var sum = 0; //总共苹果
			var count = 0; //失败的苹果数
			var countnum = 0;
			var ge = 0;

			function jieshu() {
				zanting();
				var divtop = document.querySelector(".top");
				divtop.innerHTML = "";
				time = 0;
				sum = 0;
				count = 0;
				countnum = 0;
				ge = 0;
				document.querySelector("#time").innerHTML = "时间: 00:00:00";
				document.querySelector("#zql").innerHTML = "正确率: 100%";
				document.querySelector("geshu").innerHTML = "速度： 0个/每分"
			}

			function zanting() {
				clearInterval(nz1);
				clearInterval(nz2);
				clearInterval(createHM);
				clearInterval(createCHR);
				clearInterval(createtree);
				clearInterval(timeid);
				clearInterval(zql);
				nz1 = 0;
				nz2 = 0;
			}

			function tuichu() {
				window.close();
			}

			function ale(){
				alert("挑战失败！");
			}
			
			
			window.onkeydown = function(event) {
				if(nz1 != 0 && nz2 != 0) {
					var divtop = document.querySelector(".top");
					for(var i = 0; i < divtop.children.length; i++) {
						var k1 = divtop.children[i].getAttribute("key1");
						var k2 = divtop.children[i].getAttribute("key2");
						var t = parseInt(divtop.children[i].style.top);
						if( k1 == event.keyCode || k2 == event.keyCode ) {
							//删除当前的苹果和圣诞老人
							divtop.removeChild(divtop.children[i]);
							ge++;
							document.querySelector("#zql").innerHTML = "正确率: " + parseInt((1 - count / sum) * 100) + "%";
							break;
						}
					}				
				
				}
			}



			function kaishi() {
				if(nz1 == 0 && nz2 == 0) {
					nz1 = setInterval(function() {
						var top = document.querySelector(".top");
						for(var i = 0; i < top.children.length; i++) {
							var pg = top.children[i];
							var p1 = parseInt(pg.style.top) + parseInt(pg.getAttribute("sudu1"));							
							pg.style.top = p1 + "px";							
							if(p1 > 410 ) {                       //删除失败的苹果
								top.removeChild(top.children[i]);//记录失败的个
								count++;
							}
						}
					}, 33);
					
					nz2 = setInterval(function() {
						var top = document.querySelector(".top");
						for(var j = 0; j < top.children.length; j++) {							
							var chr = top.children[j];
							var p2 = parseInt(chr.style.top) + parseInt(chr.getAttribute("sudu2"));							
							chr.style.top = p2 + "px";
							if(p2 > 410) {                       //删除失败的圣诞老人
								top.removeChild(top.children[j]);//记录失败的个
								count++;								
							}
						}
					}, 33);

					countnum = setInterval(function(){
					if(nz1 != 0 && nz2 != 0 ){
						document.querySelector("#zql").innerHTML = "正确率: " + parseInt((1 - count / sum ) * 100) + "%";
					}
					
					});
					
//					line = setInterval(function(){
//						var jingjie = parseInt((1 - count / sum ) * 100);
//						if( jingjie <= 20 ){
//							jieshu();
//							ale();
//						}
//						
//					});
//					
					numberhaima = setInterval(function(){
						document.querySelector("#geshu").innerHTML = "速度：" + parseInt(  ge / time * 60 ) + "个/分钟";
						
					})
					
					createHM = setInterval(function() {
						//每秒增加一个海马
						var div1 = document.createElement("div1");
						div1.className = "haima";
						div1.style.left = parseInt(Math.random() * 1120) + "px";
						div1.style.top = "-70px";
						//随机65-90之间的数
						var ch1 = parseInt(Math.random() * 26) + 65;
						div1.setAttribute("key1", ch1);
						div1.setAttribute("sudu1", parseInt(Math.random() * 4) + 1);
						div1.innerHTML = "&#" + ch1 + ";";
						//需要把海马加入div-top里面
						document.querySelector(".top").appendChild(div1);
						sum++; //累计海马数量

					}, 1500);

					createCHR = setInterval(function() {
						//每一秒添加一个圣诞老人
						var div2 = document.createElement("div2");
						div2.className = "chr";
						div2.style.left = parseInt(Math.random() * 1120) + "px";
						div2.style.top = "-70px";
						//随机65-90之间的数
						var ch2 = parseInt(Math.random() * 26) + 65;
						div2.setAttribute("key2", ch2);
						div2.setAttribute("sudu2", parseInt(Math.random() * 4) + 2);
						div2.innerHTML = "&#" + ch2 + ";";
						//需要把海马加入div-top里面
						document.querySelector(".top").appendChild(div2);
						sum++; //累计和

					}, 1500);
											
					createtree = setInterval(function() {
						//每一秒添加一个圣诞老人
						var div3 = document.createElement("div3");
						div3.className = "tree";
						div3.style.left = parseInt(Math.random() * 1120) + "px";
						div3.style.top = "-100px";
						div3.setAttribute("sudutree", parseInt(Math.random() * 5) + 1);
						//需要把加入div-top里面
						document.querySelector(".top").appendChild(div3);
					},1000);
																				
					timeid = setInterval(function() {
						time++;
						//把秒数转成时分秒
						var ss = time % 60;
						ss = ss < 10 ? "0" + ss : ss;
						var mm = parseInt(time / 60) % 60;
						mm = mm < 10 ? "0" + mm : mm;
						var hh = parseInt(time / 3600);
						hh = hh < 10 ? "0" + hh : hh;
						var divtime = document.querySelector("#time");
						divtime.innerHTML = "时间: " + hh + ":" + mm + ":" + ss;
					}, 1000);
				}
			}
		</script>
		</body>
</html>